import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class PurchaseRecords extends StatefulWidget {
  @override
  PurchaseRecordsPage createState() => PurchaseRecordsPage();
}

class PurchaseRecordsPage extends State<PurchaseRecords> {
  var isAllSelected = true;

  List data = [
    {
      "icon":
          "https://www.iconfinder.com/static/img/editor/meta.png?9b70a6a209",
      "title": "名字",
      "price": "￥18元/月",
      "time": "2022年2月20日",
    },
    {
      "icon":
          "https://www.iconfinder.com/static/img/editor/meta.png?9b70a6a209",
      "title": "名字",
      "price": "￥18元/月",
      "time": "2022年2月20日",
    },
    {
      "icon":
          "https://www.iconfinder.com/static/img/editor/meta.png?9b70a6a209",
      "title": "名字",
      "price": "￥18元/月",
      "time": "2022年2月20日",
    },
    {
      "icon":
          "https://www.iconfinder.com/static/img/editor/meta.png?9b70a6a209",
      "title": "名字",
      "price": "￥18元/月",
      "time": "2022年2月20日",
    },
    {
      "icon":
          "https://www.iconfinder.com/static/img/editor/meta.png?9b70a6a209",
      "title": "名字",
      "price": "￥18元/月",
      "time": "2022年2月20日",
    },
  ];
  var loadSuccess = false, isLoading = false;
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));
    return Scaffold(
        body: SafeArea(
            child: CustomScrollView(
      shrinkWrap: true,
      slivers: <Widget>[
        SliverPadding(
          padding: const EdgeInsets.all(0),
          sliver: SliverList(
            delegate: SliverChildListDelegate(
              <Widget>[
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          InkWell(
                            onTap: () {
                              Navigator.pop(context);
                            },
                            child: Row(
                              children: const [
                                Icon(Icons.arrow_back_ios),
                                Text(
                                  "返回",
                                  style: TextStyle(fontSize: 18),
                                )
                              ],
                            ),
                          ),
                          const Text(
                            "购买记录",
                            style: TextStyle(
                                fontSize: 18, fontWeight: FontWeight.bold),
                          ),
                          const Text(
                            "完成",
                            style: TextStyle(
                                fontSize: 18, fontWeight: FontWeight.w500),
                          ),
                        ],
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(20),
                        child: Container(
                          decoration: const BoxDecoration(
                            color: Colors.grey,
                            borderRadius: BorderRadius.all(Radius.circular(5)),
                          ),
                          child: SizedBox(
                            height: 30,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              mainAxisSize: MainAxisSize.max,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              verticalDirection: VerticalDirection.down,
                              children: <Widget>[
                                getSelect("全部"),
                                getSelect("我的"),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                ListView.separated(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: data.length,
                  itemBuilder: (context, index) {
                    // if (data[index] == data.length) {
                    //   setState(() {
                    //     loadSuccess=false;
                    //   });
                    //   return loadMore();
                    // }else{
                    //   return Container(
                    //     width: 100,
                    //     height: 100,
                    //     child: RaisedButton(
                    //         child: const Text("emmmmmmm"),
                    //         onPressed:(){
                    //         }),
                    //   );
                    // }
                    return SizedBox(
                        width: double.infinity,
                        height: 100,
                        child: Row(
                          children: [
                            Row(
                              children: [
                                SizedBox(
                                  width: 100,
                                  height: 100,
                                  child: Padding(
                                    padding: const EdgeInsets.all(10),
                                    child: ClipRRect(
                                      borderRadius: const BorderRadius.all(
                                          Radius.circular(10)),
                                      child: Image.network(
                                        data[index]["icon"],
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                  ),
                                ),
                                Column(
                                  children: [
                                    Text(
                                      data[index]["title"],
                                      style: const TextStyle(
                                          fontWeight: FontWeight.bold),
                                    ),
                                    Text(
                                      data[index]["time"],
                                      style:
                                          const TextStyle(color: Colors.grey),
                                    ),
                                  ],
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                )
                              ],
                            ),
                            Padding(
                              padding: const EdgeInsets.only(right: 20),
                              child: Container(
                                decoration: BoxDecoration(
                                    color: Colors.black12,
                                    borderRadius: BorderRadius.circular(10)),
                                child: Padding(
                                    padding: const EdgeInsets.all(5),
                                    child: Text(data[index]["price"])),
                              ),
                            )
                          ],
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        ));
                  },
                  separatorBuilder: (context, index) => const Divider(
                    color: Colors.white10,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    )));
  }

  getSelect(String title) {
    var isAll = (title == "全部") ? isAllSelected : !isAllSelected;
    return Expanded(
      child: InkWell(
        onTap: () {
          setState(() {
            isAllSelected = !isAllSelected;
          });
        },
        child: Padding(
            padding: const EdgeInsets.all(1),
            child: (isAll)
                ? Container(
                    decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(5))),
                    child: Center(child: Text(title)),
                  )
                : Center(child: Text(title))),
      ),
    );
  }

  Widget loadMore() {
    _retrieveData();
    return Container(
      padding: const EdgeInsets.all(16.0),
      alignment: Alignment.center,
      child: const SizedBox(
        width: 24.0,
        height: 24.0,
        child: CircularProgressIndicator(strokeWidth: 2.0),
      ),
    );
  }

  _retrieveData() {
    setState(() {
      loadSuccess = true;
    });
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.all(16.0),
      child: const Text(
        "没有更多了",
        style: TextStyle(color: Colors.grey),
      ),
    );
  }
}
